import welfareLess from "./welfare.module.less";
import { Tabs } from "antd";
import Goods from "./components/goods/goods";
import type { TabsProps } from "antd";
import { GetUserSignInfoApi } from "@/http/api/user";
import { GetWelfareGoodsListApi } from "@/http/api/welfareGoods";
import { useState, useEffect } from "react";
import { PostChangeWelfareGoodsApi } from "@/http/api/welfareGoods";
import { message, Modal } from "antd";
import { useNavigate } from "react-router-dom";

function Welfare() {
  const [PageSize, setPageSize] = useState(20);
  const [PageNum, setPageNum] = useState(1);
  const [WelfareType, setWelfareType] = useState(1);
  const [WelfareGoodsList, setWelfareGoodsList] = useState([]);
  const [OreNum, setOreNum] = useState(0);
  const [open, setOpen] = useState(false);
  const [WelfareGoodsId, setWelfareGoodsId] = useState(0);
  const [WelfareHeightTypeCode, setWelfareHeightTypeCode] = useState("");
  const navigate = useNavigate();
  const handleOk = (
    WelfareGoodsId: number,
    WelfareHeightTypeCode: string,
    CurrentPrice: number
  ) => {
    if (WelfareHeightTypeCode === "Logistics") {
      return navigate("exChangeDetails");
    }
    if (CurrentPrice > OreNum) {
      return message.error("矿石余额不足");
    }
    setWelfareGoodsId(WelfareGoodsId);
    setWelfareHeightTypeCode(WelfareHeightTypeCode);
    setOpen(true);
  };
  const handleCancel = () => {
    setOpen(false);
  };
  const ConfirmExchange = async () => {
    const params = {
      WelfareGoodsId: WelfareGoodsId,
      WelfareHeightTypeCode: WelfareHeightTypeCode,
    };
    const res: any = await PostChangeWelfareGoodsApi(params);
    console.log("兑换商品", res);
    if (res.status === 0) {
      message.success("兑换成功,可以在每日签到-查看我的补签卡数量");
      GetWelfareGoodsList();
      GetUserSignInfo();
    } else {
      message.error(res.message);
    }
    setOpen(false);
  };

  const items: TabsProps["items"] = [
    {
      key: "1",
      label: "惊喜好物",
      children: WelfareGoodsList.map((item, index) => {
        return <Goods item={item} key={index} exChange={handleOk} />;
      }),
    },
    {
      key: "2",
      label: "社区道具",
      children: WelfareGoodsList.map((item, index) => {
        return <Goods item={item} key={index} exChange={handleOk} />;
      }),
    },
  ];

  useEffect(() => {
    GetWelfareGoodsList();
  }, [WelfareType]);

  useEffect(() => {
    GetUserSignInfo();
  }, []);

  const GetUserSignInfo = async () => {
    const res: any = await GetUserSignInfoApi();
    console.log("获取到用户基础信息", res);
    if (res.status === 0) {
      setOreNum(res.UserSignInfo.OreNum);
    }
  };

  const GetWelfareGoodsList = async () => {
    const params = {
      PageSize: PageSize,
      PageNum: PageNum,
      WelfareType: WelfareType,
    };
    const res: any = await GetWelfareGoodsListApi(params);
    console.log("获取商品列表", res);
    if (res.status === 0) {
      setWelfareGoodsList([]);
      setWelfareGoodsList(res.WelfareGoodsList);
    }
  };
  const onChange = (key: string) => {
    console.log(key);
    setWelfareType(() => Number(key));
  };
  return (
    <>
      <div className={welfareLess.welfare_content}>
        <div className="header_img">
          <img src="/public/img/welfare.png" alt="背景图" />
        </div>
        <div className="notice_Content">
          <div className="notice_title">
            <div className="icon iconfont icon-shengyin"></div>
            <div className="name">公告栏</div>
          </div>
          <div className="notice_content_Value">
            1.
            小铺专属问题反馈和建议，请拍「小铺反馈通道」商品，并在备注处描述问题，工作人员将在工作日24小时内以私信的方式联系您并处理相关问题。（若备注内容为空将无法进行处理反馈）
            2.
            所有中奖/兑换商品30个自然日内未提交收件信息视为自动放弃，逾期不补；
            3.
            抽奖/兑换商品将于15个工作日内发货，商品物流信息查询：关注“顺丰速运+”小程序-“查快递”；虚拟物品我们也是十五个工作日下发到个人账号
            4.
            矿石回收请使用「回收功能」提交回收，备注回收统计不到数据，无法进行回收操作
            5.收件地址请填写详细，地址不详导致无法发货后果自负
            6.多次发货，拒收的用户，我们将建立黑名单库，后续任何物品不再发货。
            💗
            公益说明：本次公益协议审批的流程较长，目前刚刚走完双方协议签署流程。后续财务会进行捐赠打款动作，壹基金收到款项后会进行捐赠。捐赠的凭证和反馈都会在站内文章发布，流程较长，但不会缺席，敬请谅解。
          </div>
        </div>
        <div className="Tabs_content">
          <div className="tabs_title">
            <div className="tabs">
              <Tabs defaultActiveKey="1" items={items} onChange={onChange} />
            </div>
            <div className="kuang_num">
              <div>矿石余额：</div>
              <div className="icon iconfont icon-kuangshi1"></div>
              <div className="num">{OreNum}</div>
            </div>
          </div>
        </div>
        <Modal
          open={open}
          onOk={ConfirmExchange}
          onCancel={handleCancel}
          wrapClassName={"custom-modal"}
          footer={null}
          getContainer={false}
          centered
          width={400}
        >
          <div className="modal_content">
            <div className="title">确定兑换该物品</div>
            <div className="content">
              <div>补签卡可对近30日内日期补签</div>
              <div>
                兑换后不可撤销，请确认是否兑换<span>补签卡</span>?
              </div>
            </div>
            <div className="modal_bottom_btn">
              <div className="left_btn" onClick={handleCancel}>
                我再想想
              </div>
              <div className="right_btn" onClick={ConfirmExchange}>
                确定兑换
              </div>
            </div>
          </div>
        </Modal>
      </div>
    </>
  );
}

export default Welfare;
